<template>
  <div class="BorderRadiusPreviewer">
    <h2>BorderRadiusPreviewer</h2>
    <h4>by JensenWang</h4>
    <div class="container" :style="styleObject">
      <div class="leftTop inputBox">
        <input type="number" name="" id="" v-model="CornerNumber[1]" />
      </div>
      <div class="leftBottom inputBox">
        <input type="number" name="" id="" v-model="CornerNumber[3]" />
      </div>
      <div class="rightTop inputBox">
        <input type="number" name="" id="" v-model="CornerNumber[2]" />
      </div>
      <div class="rightBottom inputBox">
        <input type="number" name="" id="" v-model="CornerNumber[4]" />
      </div>
      <textarea name="" id="" cols="30" rows="10">{{ styleObject }}</textarea>
      <button @click="toClipboard(JSON.stringify(styleObject))">Copy</button>
    </div>
    <div class="controlALl">
      All
      <input type="range" name="" id="" min="0" max="200" v-model="test" />
    </div>
    {{ test }}
  </div>
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity";
import { computed, watch } from "@vue/runtime-core";
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
const test = ref(0);
let CornerNumber = reactive({
  1: ref(30),
  2: ref(40),
  3: ref(40),
  4: ref(7),
});
const styleObject = computed(() => {
  const filt = new Set(Object.values(CornerNumber));
  if (filt.size == 1) {
    return {
      "border-radius": CornerNumber[1] + "px",
    };
  } else {
    return {
      "border-top-left-radius": CornerNumber[1] + "px",
      "border-top-right-radius": CornerNumber[2] + "px",
      "border-bottom-left-radius": CornerNumber[3] + "px",
      "border-bottom-right-radius": CornerNumber[4] + "px",
    };
  }
});

watch(test, () => {
  if (test.value) {
    for (let item in CornerNumber) {
      CornerNumber[item] = test.value;
    }
  }
});
</script>

<style lang="less" scoped>
.BorderRadiusPreviewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  h2,
  h4,
  .controlALl {
    color: var(--element3);
  }
  .controlALl {
    width: 40%;
    margin-top: 80px;
    input {
      width: 100%;
    }
  }
  .container {
    width: 40vh;
    height: 30vh;
    border: 1px solid var(--element2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--primary);
    margin-top: 100px;
    button {
      margin-top: 10px;
      background-color: var(--secondary);
      width: 60px;
      height: 30px;
      color: var(--surface2);
    }
    .inputBox {
      position: absolute;
      width: 40px;
      height: 20px;
      input {
        width: 100%;
        height: 100%;
      }
    }
    .leftTop {
      top: -40px;
      left: -40px;
    }
    .leftBottom {
      bottom: -40px;
      left: -40px;
    }
    .rightTop {
      top: -40px;
      right: -40px;
    }
    .rightBottom {
      bottom: -40px;
      right: -40px;
    }
  }
}
</style>